<template>
    <ui-main title="自适应导航栏">
        <div class="item one">
            <div style="width:100%;height:40px;background:#2b3643;">
                <ui-navbar-auto :navData="navData" @changeNav="changeNav">
                    <template slot-scope="scope">
                        {{scope.item.title}}
                    </template>
                    <template slot="hideItem" slot-scope="hideItem">
                        {{hideItem.item.title}}
                    </template>
                </ui-navbar-auto>
            </div>
        </div>
        <div class="item one">
            <ui-load-md no-bar file="ui-navbar-auto.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    import uiNavbarAuto from './ui-navbar-auto'
    export default {
        components: {
            uiNavbarAuto
        },
        data() {
            return {
                navData: [],
            }
        },
        methods: {
            changeNav(item) {
                console.log(item)
            }
        },
        mounted() {
            setTimeout(() => {
                this.navData = [{
                    id: 1,
                    title: '第一个',
                    url: './asd/qwe'
                }, {
                    id: 2,
                    title: '第二个标题',
                    url: './asd/qwe'
                }, {
                    id: 3,
                    title: '第三个较长标题',
                    url: './asd/qwe'
                }, {
                    id: 4,
                    title: '第四个超级长的标题啊啊啊',
                    url: './asd/qwe'
                }, {
                    id: 5,
                    title: '五',
                    url: './asd/qwe'
                }, {
                    id: 6,
                    title: '第六个标题',
                    url: './asd/qwe'
                }, {
                    id: 7,
                    title: '第七个标题',
                    url: './asd/qwe'
                }, {
                    id: 8,
                    title: '第八个标题',
                    url: './asd/qwe'
                }, {
                    id: 9,
                    title: '第九个标题',
                    url: './asd/qwe'
                }, {
                    id: 10,
                    title: '第十个标题',
                    url: './asd/qwe'
                }, ]
            }, 1000);
        }
    }

</script>
